@import "themes/var";

.el-slider {
  .el-slider__runway {
    height: 2px;
    margin: 14px 0;
    background-color: $slider-runway-color;
    border-radius: 1px;
  }

  .el-slider__bar {
    height: 2px;
    background: $slider-track-color;
  }

  .el-slider__button-wrapper {
    top: -9px;
    width: 20px;
    height: 20px;
  }

  .el-slider__button {
    width: 10px;
    height: 10px;
  }
}

.g-slider.el-slider {
  .el-slider__runway {
    width: 85px;
    margin: 12px 0;
  }

  .el-input-number__decrease {
    color: $input-font-color;
    background: $input-bgcolor;
    border-right: $border-outline;

    &:not(.is-disabled):hover {
      z-index: 2;
      color: $input-hover-color;
      border-color: $input-hover-color;
    }
  }

  .el-input-number__increase {
    color: $input-font-color;
    background: $input-bgcolor;
    border-left: $border-outline;

    &:not(.is-disabled):hover {
      z-index: 2;
      color: $input-hover-color;
      border-color: $input-hover-color;
    }
  }

  .el-input-number--mini {
    width: 88px;
    margin-top: 0;

    .el-input-number__decrease {
      top: auto;
      right: 1px;
      bottom: 1px;
      left: auto;
      line-height: 13px;
      border-top: $border-outline;
      border-right: none;
      border-left: $border-outline;
      border-radius: 0 0 4px;

      &:not(.is-disabled):hover {
        z-index: 2;
        color: $input-hover-color;
        border-color: $input-hover-color;
      }
    }

    .el-input-number__increase {
      line-height: 13px;
      border-bottom: $border-outline;
      border-radius: 0 4px 0 0;

      &:not(.is-disabled):hover {
        z-index: 2;
        color: $input-hover-color;
        border-color: $input-hover-color;
      }
    }

    .el-input .el-input__inner {
      padding-right: 35px;
      padding-left: 7px;
      color: #fff;
      text-align: left;
    }
  }
}
